﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2>
        <DemoNavLink Link="Memo#ClearButton" />Clear Button and Placeholder
    </h2>
    <p>
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxTextEditorBase.ClearButtonDisplayMode">ClearButtonDisplayMode</a> property to <b>Auto</b> to display the <b>Clear</b> button in the editor when it is not empty.
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxTextEditorBase.NullText">NullText</a> property to specify placeholder text that should be displayed when the editor is empty.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Clear the text to see the placeholder text"/>
    </div>
    <div class="card-body mw-480">
        <DxMemo @bind-Text="@TextValue"
                   ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                   BindValueMode="BindValueMode.OnInput"
                   NullText="Type text..."
                   SizeMode="SizeMode"></DxMemo>
    </div>
</div>

<CodeSnippet_Editor_Memo_ClearButton />

@code {
    string TextValue { get; set; } = "Prepare 2020 Marketing Plan: We need to double revenues in 2020 and our marketing strategy is going to be key here. " +
            "R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers. " +
            "Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
}
